<template>
  <div class="boxMax" v-if="dialogVisible">
    <el-table :data="paginatedTableData" border style="width: 100%">
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="sgbm" label="事故编号" width="180" />
      <el-table-column prop="sglx" label="事故类型" width="150" />
      <el-table-column prop="sgfssj" label="发生时间" />
      <el-table-column prop="bmmc" label="处理单位" />
      <el-table-column prop="sgdd" label="事故地点" />
      <el-table-column label="操作" width="100">
        <template #default="scope">
          <el-button type="text" @click="showDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 共多少页共多少条 -->
    <div class="spans">
      <el-pagination
        :page-size="pageSize"
        :current-page="currentPage"
        layout="prev, pager, next"
        :total="totalItems"
        @current-change="handlePageChange"
      />
      <span>总页数：{{ totalPages }}</span>
      <span style="">总条数：{{ totalItems }}</span>
    </div>
    <div class="dialog-footer" style="margin-top: 10px">
      <el-button type="primary" @click="dialogVisible = false">
        收起
      </el-button>
    </div>
    <!-- 详情弹窗 -->
    <AccidentDetail @close="opacity = 1" ref="accidentDetail" />
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { GetEmergencyPaging } from "@/service/api/report-analysis";
import { PostPieChartDetailList } from "@/service/api/map";

const totalPages = computed(() => Math.ceil(totalItems.value / pageSize.value));
const props = ref<any>();
const pageSize = ref(10);
const currentPage = ref(1);
const dialogVisible = ref(false);
const accidentDetail = ref<any>(null);
const opacity = ref(1);
const changeApi = ref(false);
interface Accident {
  sgbm: string;
  sglx: string;
  sgrdyy: string | null;
  sgfssj: string;
  bmmc: string;
  sfdxsg: string;
  sfgz: string | null;
  sgdd: string;
}

const tableData = ref<Accident[]>([]);
const totalItems = computed(() => tableData.value.length);
const paginatedTableData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return tableData.value.slice(start, end);
});
const showDetail = (row: Accident) => {
  opacity.value = 0;
  accidentDetail.value.sgbh = row.sgbm;
  accidentDetail.value.fetchAccidentDetails(row.sgbm);
};

interface ApiResponse {
  rows: Accident[];
  total: number;
}

const fetchData = async (data: any) => {
  try {
    if (changeApi.value) {
      const res = (await PostPieChartDetailList(
        data
      )) as unknown as ApiResponse;
      tableData.value = res.rows;
      dialogVisible.value = true;
      changeApi.value = false;
      return res;
    } else {
      const res = (await GetEmergencyPaging(data)) as ApiResponse;
      tableData.value = res.rows;

      dialogVisible.value = true;
      return res;
    }
  } catch (error) {
    console.error("Error in fetchData:", error);
    throw error;
  }
};

watch(
  () => props.value,
  (newVal) => {
    if (newVal) {
      useDebounceFn(() => {
        fetchData(props.value);
      }, 300)();
    }
  },
  { deep: true }
);

watch(
  () => dialogVisible.value,
  (newVal) => {
    if (!newVal) {
      currentPage.value = 1;
    }
  }
);
const handlePageChange = (newPage: number) => {
  currentPage.value = newPage;
};
defineExpose({
  props,
  changeApi,
  dialogVisible,
});
</script>

<style lang="less" scoped>
::v-deep .el-dialog {
  background-color: transparent !important;
  backdrop-filter: blur(5px);
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("@/assets/img/dashboard/bgaa01.png");
    background-size: cover;
    background-position: center;
    opacity: 0.1;
    z-index: -1;
  }
  .el-table {
    .cell {
      color: white;
    }
  }
  .el-dialog__title {
    color: white;
  }
}
::v-deep .el-pagination button:disabled,
::v-deep .el-pagination .btn-prev,
::v-deep .el-pagination > .is-last {
  background: transparent;
}
::v-deep .el-pager li {
  background: transparent;
  color: white;
}
::v-deep .el-pager li.is-active {
  color: rgb(0, 255, 221);
}
.el-table__inner-wrapper {
  text-align: center;
}
::v-deep .cell {
  text-align: center;
}
.spans {
  display: flex;
  align-items: center;
  gap: 20px;
  color: white;
}
.boxMax {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  // background: red;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 62, 69, 0.9);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    z-index: -1;
  }
}
.el-button {
  &.el-button--primary {
    border: none !important; /* 移除边框 */
    background: url("@/assets/img/button-bgImg.png") center/cover no-repeat !important;
    color: #fff !important; /* 确保文字可见 */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 105px;

    /* 移除Element默认的hover/active效果 */
    &:hover,
    &:active,
    &:focus {
      background: url("@/assets/img/button-bgImg.png") center/cover no-repeat !important;
      opacity: 0.9; /* 添加悬停效果 */
    }

    /* 如果图片有透明区域，添加备用背景色 */
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      // background-color: var(
      //   --el-color-primary
      // ); /* 使用Element主题色作为fallback */
      background-color: #fff0;
      z-index: -1;
    }
  }
}
</style>
